<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>智能搜索商品弹出页面</title>
  	<link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        /*弹窗商品样式*/
        html,body{background: none !important;}
        header {position: fixed;top: 0;left: 0;right: 0;bottom: 0;}
        .wrap{background: none !important;}
        .goodsbox{display: flex;flex-wrap: nowrap;align-items: center;justify-content: center;height: 100%;}
        .goodsPop{width: 8.546rem;padding:0px 0.29rem;background: #fff;border-radius: 0.4rem;
          box-sizing: border-box;position: relative;}
        .title{border-bottom: 1px solid #ededed;display: flex;flex-wrap: nowrap;justify-content: space-between;
          align-items: center;height: 1.2rem;box-sizing: content-box;}
        .lineSt{display: flex;align-items: center;}
        .lineSt span{width: 0.1rem;background: #ff4c41;border-radius: 0.1rem;height: 0.4rem;display: inline-block;}
        .detialBox{color: #ff4c41;}
        .iconxiangqing{color: #ff4c41;}
        .goods{padding-top:0.29rem;display: flex;flex-wrap: nowrap;justify-content: space-between;}
        .shopImg{margin-right: 0.2rem;width: 2.746rem;height: 2.746rem;min-width: 2.746rem;}
        .shopImg img{width: 2.746rem;height: 2.746rem;}
        .shopMsg{width: 100%;}
        .goodsTitle{color: #333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
          -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
        .goodsMsgBox2{width: 100%;}
        .shopName{color: #999;overflow: hidden;text-overflow: ellipsis;
          display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;width: 100%}
        .quanbox {display: flex;flex-wrap: nowrap;justify-content: flex-start;margin: 0.1rem 0;}
        .quanbox span:nth-child(1){height: 0.48rem;padding:0 0.25rem;
          background-image: url(../image/goods/quanbg.png);border-radius:0.1rem;display: flex;align-items: center;
          margin-right: 0.15rem;background-size: 100% 100%;color: #fff;}
        .quanbox span:nth-child(2){height: 0.48rem;color:#ff4d3A;border-radius:0.1rem;padding:0 0.25rem;
          display: flex;align-items: center;background:#ffe4e4;border:0.5px solid #ff4d3A;
          padding: 0 0.1rem;box-sizing: border-box;}
        .pricebox{display: flex;width: 100%;flex-wrap: nowrap;justify-content: space-between;align-items: flex-end;}
        .pricebox span:nth-child(1){color: #ff4c41;font-size:0.346rem;display: flex;align-items:flex-end;}
        .p_num{font-size: 0.48rem !important;display: flex;align-items:flex-end;line-height: normal;}
        .pricebox span:nth-child(2){color: #999;font-size:0.293rem;}
        .aui-btn{width: 6.18rem;height: 1rem;margin:0.5rem auto;}
        .aui-btn-block.aui-btn-sm{height: 1rem;line-height: 1rem;background: #ff4c41;border-radius: 0.5rem;
          color: #fff;}
        .close{position: absolute;width: 1rem;height: 1rem;left: 3.773rem;bottom: -1.5rem;}
    </style>
</head>
<body id="wrap">
    <!-- /*弹窗商品样式*/  -->
    <header tapmode></header>
    <div class="goodsbox" id="app" v-cloak>
        <div class="goodsPop">
            <div class="title">
                <span class="lineSt sg-text-size30"><span></span>&nbsp;已为您找到商品</span>
                <span class="detialBox sg-text-size30" v-if="goodsData.user_type == 0 || goodsData.user_type == 1"  tapmode @click="openGoodsDeatilFun(goodsData)">
                    <span class="iconfont iconxiangqing sg-text-size30"></span>
                    商品详情
                    <span class="iconfont iconjiantou sg-text-size30"></span>
                </span>
            </div>
            <div class="goods" tapmode @click="openGoodsDeatilFun(goodsData)">
                <div class="shopImg">
                    <img :src='goodsData.pict_url' alt="" />
                </div>
                <div class="shopMsg">
                    <p class="goodsTitle sg-text-size28">{{goodsData.short_title != '' ? goodsData.short_title :  goodsData.title}}</p>
                    <div class="goodsMsgBox2">
                        <p class="shopName sg-text-size22">{{goodsData.shop_title}}</p>
                        <p class="quanbox sg-text-size22"><span>券{{goodsData.coupon_amount}}元</span> <span>补贴{{goodsData.per_price}}元</span> </p>
                        <p class="pricebox">
                          <span>到手价￥<span class="p_num">{{goodsData.end_price}}</span></span>
                          <span>已抢{{goodsData.volume}}件</span>
                        </p>
                    </div>
                </div>
            </div>
            <p><div class="aui-btn aui-btn-block aui-btn-sm sg-text-size30" taomode @click="openGoodsDeatilFun(goodsData,1)">
              下单立省{{goodsData.save_money}}元
            </div></p>
            <img class="close" src="../image/home_icon_shutdown.png" alt="" taomode @click="closeWinFun()">
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    (function (doc, win) {
      	var docEl = doc.documentElement,
      	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      	recalc = function () {
        		var clientWidth = docEl.clientWidth;
        		if (!clientWidth) return;
        		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
      	};
      	if(!doc.addEventListener){
            return
        };
      	win.addEventListener(resizeEvt, recalc, false);
      	doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    var app; var aliBC ,item;
    apiready = function () {
    		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
    		api.parseTapmode();
        aliBC = api.require('aliBC');
        item = api.pageParam.data
        //初始化数据
        app = new Vue({
            el: '#app',
            data: {
                goodsData:api.pageParam.data
            }
        })
    }
    // 打开商品详情页面
    function opendetail() {
        api.openTabLayout({
            name: 'item',
            url: './item.html',
            useWKWebView: true,
            bgColor: '#fff',
            pageParam: {
                item: app.goodsData
            }
        });
        closeWinFun()
    }
    // 购买商品
    function buyFun(){
      // 是否登录
      if (getToken()) {
          //授权之后判断是不是淘礼金商品，是则请求淘礼金券链接
          relation(function (a) {
              if (item.coupon_share_url) { //普通商品，有券链接并且不是淘礼金商品重新请求券链接
                  aliBC.showPageByUrl({
                      url: item.coupon_share_url + a,
                      backUrl: api.systemType == "ios" ? "" : "tbopen24627965"
                  }, function (ret, err) {});
                  closeWinFun()
              }else {  //去淘宝打开商品详情页
                  aliBC.showDetailPage({
                      itemId: item.item_id,
                      openType: 'native',
                      backUrl: api.systemType == "ios" ? "" : "tbopen24627965",
                      adzoneId: a,
                      pid: api.getGlobalData({	key: 'config_info'}).tb_pid,
                  }, function (ret, err) {
                      if (ret) {
                      } else {
                          api.toast({
                              msg: '淘宝页面打开失败，请重试',
                              duration: 2000,
                              location: 'middle'
                          });
                      }
                  });
                  closeWinFun()
              }
          }, function () {
          // 未淘宝授权
              showLogin(function () {
                  tbsq();
              }, function () {
                  api.toast({
                      msg: '淘宝授权失败，请重试',
                      duration: 2000,
                      location: 'middle'
                  });
              })
          })
      }
    }
    // 淘宝授权
    function tbsq() {
    	$api.ajax({
    		url: "api/member/tb_relate",
    		method: 'get',
    	}, function (ret) {
    		// var urll = ret.data.oauth_url.replace('https://cs.xianlady.com/','https://fudai.zhequanapp.com/');
    		// console.log(urll);
    		aliBC.showPageByUrl({
    			url: ret.data.oauth_url,
    		}, function (ret, err) {
    			if (ret) {
    				api.toast({
    					msg: '淘宝授权成功',
    					duration: 2000,
    					location: 'middle'
    				});
    			} else {
    				api.toast({
    					msg: '您已取消淘宝授权',
    					duration: 2000,
    					location: 'middle'
    				});
    			}
    		});
    	})
    }
    // 淘宝授权方法
    function showLogin(a, b) {
    		aliBC.logout(function (ret, err) {
    				if (ret.status) {
    						aliBC.showLogin(function (ret, err) { //用户登录授权
    								if (ret) {
    										a && a();
    								} else {
    										b && b();
    								}
    						});
    				}
    		});
    }
    // 请求接口查看是否授权
    function relation(a, b) {
    		$api.ajax({
    				url: 'api/member/info',
    				method: 'get',
    		}, function (ret) {
    			if (ret.data.info.relation_id > 0) {
    					api.setGlobalData({
    							key: 'member_info',
    							value: ret.data.info,
    					});
    					a && a(ret.data.info.relation_id);
    			} else {
    					b && b()
    			}
    		});
    }
    // 关闭当前页面
    function closeWinFun(){
      api.closeFrame({});
    }
</script>
</html>
